import React, { Component } from 'react';
import {withRouter} from 'react-router-dom';
import { connect } from 'react-redux';
import { loginAction } from '../actions/loginActions';
import axios from 'axios';

class Navbar extends Component {
    state = {
        loginInfo: {
            curPage: "",
            curName: "",
            subPage: null,
            prtPage: null,
            userName: "",
            userRole: "",
            loginID: "",
            errorInfo: "",
        }
    }
    pageQuery = (page_path) => {
        let loginInfo = this.props.loginInfo;
        console.log("pageQuery");
        console.log(this.props);
        console.log(loginInfo);
        axios.post("/app/pageQuery", {
            "userName": loginInfo.userName,
            "userRole": loginInfo.userRole,
            "curPage": page_path,
            "loginID": loginInfo.loginID
        }).then((res) => {
            if(res.data.errorInfo === "") {
                let loginInfo = {
                    ...res.data,
                    "curRoute": "/",
                }
                console.log(res.data);
                console.log(loginInfo);
                this.props.loginAction(loginInfo);
                this.setState({
                    ...this.state,
                    loginInfo: loginInfo,
                })
                if(null === res.data.subPage) {
                    loginInfo.curRoute = "/" + page_path;
                    this.props.loginAction(loginInfo);
                }
            } else {
                if("请先登录" === res.data.errorInfo) {
                    this.props.history.push('/login');
                } else {
                    console.log("服务器端返回的错误信息: " + res.data.errorInfo)
                    console.log(res.data)
                }
            }
        }).catch((err) => {
            console.log("请求服务器端时产生的错误信息: " + err)
        })
    }
    componentDidMount() {
        let loginInfo = this.props.loginInfo;
        this.setState({
            ...this.state,
            loginInfo: loginInfo,
        })
        if(null === loginInfo || false === loginInfo.loginStatus) {
            this.props.history.push('/login');
            return;
        }
    }
    logout = () => {
        axios.post("/app/logout", {
            "userName": this.state.loginInfo.userName,
            "loginID": this.state.loginInfo.loginID,
        }).then((res) => {
            if(res.data.loginStatus === false) {
                this.props.loginAction(res.data);
                this.props.history.push('/login');
            } else {
                alert(res.data.errorInfo)
                console.log(res.data)
                this.setState(res.data)
            }
        }).catch((err) => {
            alert(err)
        })
    }
    render() {
        return <div></div>
        /*console.log("navbar.js");
        console.log(this.state.loginInfo.prtPage);
        const mainHead = undefined === this.state.loginInfo.prtPage || null === this.state.loginInfo.prtPage ? (
            <div className='headbar'>
                <div className='title'>小工具</div>
                <div className='logout'><span className='alink' onClick={this.logout}>注销</span></div>
            </div>
        ): ( this.state.loginInfo.prtPage.map(prtpg => {
            return (
                <span key={prtpg.page_path}>
                    <span onClick={() => this.pageQuery(prtpg.page_path)} className='alink'>{prtpg.page_name}</span>
                    <label> / </label>
                </span>
            )
        }))
        return (
            <div align="center">{mainHead}</div>
        )*/
    }
}

const mapStateToProps = (state) => {
    return {
        loginInfo: state.loginInfo
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        loginAction: (loginInfo) => dispatch(loginAction(loginInfo))
    }
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Navbar));
